<template>
	<view class="content">
		<u-picker :show="wshow" @cancel="wclose" @confirm="wconfirm" :columns="columns" keyName="name"></u-picker>
		<view class="uniBtn times" @click="wshow=true">
			<view style="white-space: nowrap;">维保类型</view>
			<view>{{wname?wname:'请选择'}}</view>
		</view>
		
		<u-picker :show="dshow" @cancel="dclose" @confirm="dconfirm" :columns="columns2" keyName="sydw"></u-picker>
		<view class="uniBtn times" @click="dshow=true">
			<view style="white-space: nowrap;">维保电梯</view>
			<view>{{dname?dname:'请选择'}}</view>
		</view>
		
		<view class="uniBtn times">
			<view style="white-space: nowrap;">维保人员</view>
			<view>{{checkboxList1.length>0?' ':'请先选择电梯'}}</view>
		</view>
		<view class="choose" v-if="checkboxList1.length>0">
			<u-checkbox-group
			            v-model="checkboxValue1"
			            placement="column"
			            @change="checkboxChange"
			        >
			            <u-checkbox
			                :customStyle="{marginBottom: '8px'}"
			                v-for="(item, index) in checkboxList1"
			                :key="index"
			                :label="item.name"
			                :name="item.id"
			            >
			            </u-checkbox>
			        </u-checkbox-group>
		</view>
		
		<u-datetime-picker
		    :show="show"
		    v-model="value1"
		    mode="datetime"
			@cancel="close" 
			@confirm="confirm"
		></u-datetime-picker>
		<view class="uniBtn times" @click="show=true">
			<view>维保开始时间</view>
			<view>{{start_time?start_time:'请选择'}}</view>
		</view>
		<u-datetime-picker
		    :show="show2"
			:minDate="value2"
		    mode="datetime"
			@cancel="close2" 
			@confirm="confirm2"
		></u-datetime-picker>
		<view class="uniBtn times" @click="show2=true">
			<view>维保结束时间</view>
			<view>{{end_time?end_time:'请选择'}}</view>
		</view>
	
		<view class="title">维保详情</view>
		<u--textarea v-model="content" placeholder="请详细描述您的维保详情" count maxlength="200"></u--textarea>
		<view class="title">维保图片</view>
		<view class="addbox">
			<view class="img">
				<view v-for="(item, i) in tempFilePaths" :key="i" style="position: relative">
					<image :class="[(i + 1) % 4 === 0 ? 'noMargin' : '']" :src="item" @click="previewImage(i)" mode=""></image>
					<image :class="[(i + 1) % 4 === 0 ? 'noMargindel' : '']" class="del" src="@/static/mains/del.png" mode="" @click="delImg(i)"></image>
				</view>
				<view class="upload" @click="upload"><text>{{tempFilePaths.length}}/5</text></view>
			</view>
		</view>
		
		<view class="btn" @click="submit">
			<u-button text="提交" color="linear-gradient(to right, rgb(6,137,215), rgb(8,129,205))"></u-button>
		</view>
	</view>
</template>

<script>
	import { uploadFile } from '@/utils/tools';
	import config from "@/config/index.js";
	const imgUrl = config.imgUrl;
	export default {
		data() {
			return {
				show: false,
				value1: Number(new Date()),
				start_time:'',
				
				show2: false,
				value2: Number(new Date()),
				end_time:'',
				
				content:'',
				
				did:'',
				dname:'',
				dshow: false,
				columns2: [
				    // [{
				    //     sydw: '雪月夜',
				    //     id: 2021
				    // }, {
				    //     sydw: '冷夜雨',
				    //     id: 804
				    // }]
				],
			
				type:'',
				wname:'',
				wshow:false,
				columns:[
					[{
					    name: '保养',
					    value: 1
					}, {
					    name: '维修',
					    value: 2
					}, {
					    name: '巡查',
					    value: 3
					}]
				],
				
				checkboxValue1:[],
				// 基本案列数据
				checkboxList1: [
					// {
				 //        name: '苹果',
				 //        disabled: false
				 //    },
				 //    {
				 //        name: '香蕉',
				 //        disabled: false
				 //    },
				 //    {
				 //        name: '橙子',
				 //        disabled: false
				 //    }
				],
				
				tempFilePaths: [
					// 'https://z1.ax1x.com/2023/08/09/pPZhJ8e.png',
					// 'https://z1.ax1x.com/2023/08/09/pPZhJ8e.png',
					// 'https://z1.ax1x.com/2023/08/09/pPZhJ8e.png',
					// 'https://z1.ax1x.com/2023/08/09/pPZhJ8e.png',
					// 'https://z1.ax1x.com/2023/08/09/pPZhJ8e.png'
				]
			}
		},
		async onLoad() {
			let res = await this.$api.getdict({type:"wbtype"});
			if(res.code == 1){
				// console.log(res)
				this.columns[0] = res.data.wbtype;
			}
			let res2 = await this.$api.mydt();
			if(res2.code == 1){
				// console.log(res)
				this.columns2.push(res2.data)
				// this.dtlist = res.data;
			}
			
		},
		methods: {
			// 获取当前时间和页面传参
			getTime(value) {
				//获取时间
				var date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				let strDate = Y + M + D + h + m + s;
				// console.log(strDate); //2020-05-08 17:44:56
				return strDate;
			},
			wclose(e) {
				this.wshow = false;
			},
			wconfirm(e) {
				console.log(e.value[0].value)
				// console.log(e.value[0].sydw)
				this.type = e.value[0].value;
				this.wname = e.value[0].name;
				this.wshow = false;
			},
			dclose(e) {
				this.dshow = false;
			},
			async dconfirm(e) {
				// console.log(e.value[0].id)
				// console.log(e.value[0].sydw)
				this.did = e.value[0].id;
				this.dname = e.value[0].sydw;
				this.dshow = false;
				
				let res = await this.$api.dtusers({did:e.value[0].id});
				if(res.code == 1){
					// console.log(res)
					this.checkboxValue1 = [];
					this.checkboxList1 =res.data;
				}
			},
			checkboxChange(e){
				console.log(e)
			},
			close(e) {
				this.show = false;
			},
			close2(e) {
				this.show2 = false;
			},
			confirm(e) {
				// console.log(e.value);
				this.value2 = e.value;
				this.start_time = this.getTime(e.value);
				this.show = false;
			},
			confirm2(e) {
				// console.log(e.value);
				this.end_time = this.getTime(e.value);
				this.show2 = false;
			},
			// 上传
			upload() {
				var that = this;
				uni.chooseImage({
					count: 5, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function (res) {
						let list = [];
						let count = 0;
						let files = res.tempFilePaths;
						uni.showLoading();
						files.forEach((item) => {
							uploadFile(item, {
								header: {
									'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
								}
							})
								.then((res) => {
									uni.hideLoading();
									count++;
									//如果是最后一张,则隐藏等待中
									if (count == files.length) {
										wx.hideLoading();
									}
									// console.log(res,'1111');
									// this.avatar = res;
									list.push(res); //待上传图片临时路径
									that.tempFilePaths = list;
								})
								.catch(() => {
									uni.hideLoading();
									uni.showToast({
										title: '上传失败,请重新上传!',
										icon: 'none'
									});
								});
						});
					}
				});
			},
			// 删除
			delImg(i) {
				this.tempFilePaths.splice(i, 1);
			},
			// 预览
			previewImage: function (index) {
				let imgs = [];
				for (let i = 0; i < this.tempFilePaths.length; i++) {
					let str = this.tempFilePaths[i];
					imgs.push(str);
				}
				uni.previewImage({
					current: index, //预览图片的下标
					urls: imgs //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				});
			},
			
			async submit(){
				if(!this.type){
					uni.showToast({
						title:'请选择维保类型',
						icon:'none'
					})
					return
				}
				if(!this.did){
					uni.showToast({
						title:'请选择维保电梯',
						icon:'none'
					})
					return
				}
				if(this.checkboxValue1.length==0){
					uni.showToast({
						title:'请选择维保人员',
						icon:'none'
					})
					return
				}
				if(!this.start_time){
					uni.showToast({
						title:'请选择开始时间',
						icon:'none'
					})
					return
				}
				if(!this.end_time){
					uni.showToast({
						title:'请选择结束时间',
						icon:'none'
					})
					return
				}
				if(!this.content){
					uni.showToast({
						title:'请输入维保详情',
						icon:'none'
					})
					return
				}
				let imgs = [];
				if(this.tempFilePaths.length>0){
					this.tempFilePaths.forEach((item) => {
						imgs.push(item.split(imgUrl)[1])
					})
				}
				let params ={
					type:this.type,
					did:this.did,
					wbuids:this.checkboxValue1.toString(),
					start_time:this.start_time,
					end_time:this.end_time,
					content:this.content,
					images:imgs.toString()
				}
				
				let res = await this.$api.insertwb(params);
				if(res.code == 1){
					// console.log(res)
					uni.showToast({
						title:'操作成功'
					})
					setTimeout(function(){
						uni.navigateBack()
					},800)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 35rpx 20rpx;
		font-size: 30rpx;
		.times{
			margin-bottom: 30rpx;
			font-weight: bold;
		}
	
		.addbox {
			border: 2rpx solid #dedede;
			margin: 25rpx 0;
			margin-bottom: 100rpx;
			border-radius: 25rpx;
	
			.img {
				display: flex;
				flex-wrap: wrap;
				background: #fff;
				padding:20rpx 30rpx 0 30rpx;
				border-radius: 25rpx;
				.del {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					top: -20rpx;
					right: -20rpx;
				}
			}
	
			image {
				width: 140rpx;
				height: 140rpx;
				margin-bottom: 20rpx;
				margin-right: 26rpx;
			}
	
			.noMargin {
				margin-right: 0rpx;
			}
	
			.noMargindel {
				top: -20rpx !important;
				right: -44rpx !important;
			}
	
			.upload {
				width: 140rpx;
				height: 140rpx;
				background: url(@/static/mains/add.png) no-repeat;
				background-size: 100% 100%;
				margin-bottom: 20rpx;
				position: relative;
				
				text{
					position: absolute;
					right: 9rpx;
					bottom: 9rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					color: #CBCBCB;
				}
			}
		}
	
		.title {
			height: 26rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #000000;
			margin: 30rpx 0rpx;
		}
		.choose {
			background: #fff;
			padding: 26rpx 40rpx;
			border-radius: 10rpx;
			margin: 17rpx 0 30rpx 0;
			border: 2rpx solid #dedede;
		}
		.btn {
			margin: 120rpx 20rpx 0 20rpx;
		}
	}
</style>
